<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="example">
        <div v-bind:style="[baseStyle, fontStyle ,styleRadius]">
            <h4>枫桥夜泊</h4>
            <p>
                月黑风高的夜晚，<br>月黑风高的夜晚，<br>月黑风高的夜晚，<br>月黑风高的夜晚。<br>月黑风高的夜晚，<br>月黑风高的夜晚，<br>
            </p>
        </div> 
    </div>
    <script>
        var vm = new Vue({
            el: "#example",
            data: {
                width: 400,
                margin: '10px auto',
                padding: 30,
                bgcolor: 'lightblue',
                family: "华文楷体",
                fontSize: 36,
                color: "green",
                align: "center",
                border: "1px solid #cccccc",
                boxShadow: "3px 3px 6px #999999",
                mode: "vertical-rl" //垂直方向自右而左的书写方式
            },
            // 使用计算属性绑定样式
            computed: {
                baseStyle: function(){ //基本样式
                    return {
                        width: this.width + "px",
                        margin: this.margin,
                        padding: this.padding + "px",
                        'background-color': this.bgcolor
                    }
                },
                fontStyle: function(){ //字体样式
                    return {
                        "font-family": this.family,
                        fontSize: this.fontSize + "px",
                        color: this.color,
                        "text-align": this.align
                    }
                },
                styleRadius: function(){
                    return {
                        border: this.border, //边框样式
                        "box-shadow": this.boxShadow, //边框阴影
                        "writing-mode": this.mode //书写样式
                    }
                }
            }
        })


    </script>
    
</body>
</html>